<meta meta="首页商品展示配置" args="data"/>
<style>

</style>
<form class="form-horizontal" id="form" s="form,datac,nda,valid" s-data="data" style="width: 800px;">
    <table class="table table-bordered table-striped">
        <tr>
            <th>标题</th>
            <td>
                <input autocomplete="off" type="text" class="form-control input-sm" placeholder="请输入楼层标题"
                       value="" name="title" />
            </td>
        </tr>
        <tr>
            <th>标题图片</th>
            <td s="tpl" class="form-inline">
                <img src="{%=this.titlePicUrl%}" style="max-height: 50px;" s-dblclick="removeFloorTitleImage(this)"/>
                <input autocomplete="off" type="hidden" class="titlePic" value="{%=this.titlePic%}" name="titlePic"/>
                <input autocomplete="off" type="text" class="form-control titlePicWidth input-sm" placeholder="长度"
                       style="width: 60px;" value="{%=this.titlePicWidth%}" name="titlePicWidth"/> &times;
                <input autocomplete="off" type="text" class="form-control titlePicHeight input-sm" placeholder="宽度"
                       style="width: 60px;" value="{%=this.titlePicHeight%}" name="titlePicHeight"/>
                &nbsp;&nbsp;
                <i class="fa fa-image" s-click="uploadFloorTitleImage(this)"></i> &nbsp;&nbsp;
                <i class="fa fa-remove" s-click="removeFloorTitleImage(this)"></i>
            </td>
        </tr>
        <tr>
            <th>显示标题</th>
            <td>
                <label class="s-checkbox-switch">
                    <input autocomplete="off" checked type="checkbox" name="showTitle" value="true" />
                    <span class="s-checkbox-indicator"></span>
                </label>
            </td>
        </tr>
        <tr>
            <th>分类条</th>
            <td class="form-inline">
                <select class="form-control" name="shopcatBarDisplay">
                    <option value="NONE">隐藏</option>
                    <option value="AFFIX_TOP">顶部</option>
                    <option value="SHOW">显示</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>商品排列</th>
            <td class="form-inline">
                <select class="form-control" name="listType">
                    <option value="GRID">豆腐块</option>
                    <option value="LIST">列表</option>
                    <option value="ALTERNATE">按日交替</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>商品查询参数</th>
            <td>
                <div id="pageItemSearchParams" s-datac-ig="true"
                     s-window="{href: '/operation-center/COMMISSION_ITEM_SEARCH_PARAMS.html', args: {params: data.searchParam}}" s="window"></div>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    S.getContent = function () {
        var deferred = $.Deferred();
        $form.validate().done(function() {
            $pageItemSearchParams.getParams().done(function(itemSearchParams) {
                var obj = Smart.serializeToObject($form.node);
                obj.searchParam = itemSearchParams;
                deferred.resolve(obj)
            })

        })
        return deferred;
    }
    function uploadFloorTitleImage($this) {
        selectImage().done(function(datas) {
            if(datas.length) {
                var container = S.node;
                var img = container.find("img").attr("src", datas[0].url)
                container.find(".titlePic").val(datas[0].key)
                setTimeout(function() {
                    container.find(".titlePicWidth").val(img[0].naturalWidth)
                    container.find(".titlePicHeight").val(img[0].naturalHeight)
                }, 300);
            }
        })
    }

    function removeFloorTitleImage($this) {
        var container = $this.node.parent()
        container.find("img").attr("src", "")
        container.find(".titlePic").val("")
    }

    function selectImage() {
        return S.popupOpen("/oss/objects-selector.html", {prefix: 'operation'})
    }
</script>